<template>
  <el-dialog v-model="localVisible" :title="title" :width="width" :before-close="handleClose">
    <!-- 这里可以放置你的对话框内容 -->
    <slot></slot>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElMessageBox } from 'element-plus'

// 定义组件的 props
const props = defineProps({
  visible: Boolean,
  title: {
    type: String,
    default: 'Dialog'
  },
  width: {
    type: String,
    default: '20%'
  },
  closeTips: {
    type: Boolean,
    default: true
  }
})

// 定义事件发射器
const emit = defineEmits(['update:visible'])

// 使用 computed 属性来简化对 visible 的监听和更新
const localVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 关闭对话框时的处理逻辑
const handleClose = (done: () => void) => {
  if (props.closeTips) {
    ElMessageBox.confirm('确定关闭该窗口?', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        done()
        localVisible.value = false // 使用 localVisible 来发射关闭事件
      })
      .catch(() => {
        // 处理取消操作或错误
      })
  } else {
    done()
  }
}
</script>
